<template>
  <section class="register">
    <img class="banner" src="http://imgcps.jd.com/ling/7110131/55S36KOF6KGs6KGr6IqC/6Leo5bqX5ruhMjk55YePODA/p-5bd8253082acdd181d02fa6d/9e8bbcca.jpg"/>
    <cube-form
      class="from_input"
      :model="model"
      :schema="schema"
      @submit.prevent="submitHandler"
    >
    </cube-form>
    <button type="button" id="but" @click="clickPhone">获取验证码</button>
  </section>
</template>

<script>
export default {
  name: 'Register',
  data () {
    return {
      times: 60,
      model: {
        username: '',
        password: '',
        phone: '',
        phoneNum: ''
      },
      schema: { // 配置
        fields: [
          { // 用户名配置
            type: 'input',
            modelKey: 'username',
            label: '用户名',
            props: {
              placeholder: '请输入用户名'
            },
            rules: { // 校验
              required: true, // 必填
              type: 'string',
              min: 3
            },
            register: 'blur', // 失去焦点后就会检测
            message: {
              required: '请输入正确的用户名',
              min: '用户名不得小于3位'
            }
          },
          { // 用户名配置
            type: 'input',
            modelKey: 'password',
            label: '密码',
            props: {
              placeholder: '请输入密码',
              type: 'password', // 密码不可看
              eye: { // 小眼睛
                open: false
              }
            },
            rules: { // 校验
              required: true, // 必填
              type: 'string',
              min: 6
            },
            register: 'blur', // 失去焦点后就会检测
            message: {
              required: '请输入正确的密码',
              min: '密码不得小于6位'
            }
          },
          { // 用户名配置
            type: 'input',
            modelKey: 'phone',
            label: '手机号',
            props: {
              placeholder: '请输入手机号',
              type: 'number' // 密码不可看
            },
            rules: { // 校验
              required: true, // 必填
              type: 'string',
              len: 11,
              pattern: /^1[3|5|7|8][0-9]\d{8}$/,
              custom: (val) => {
                return val.length === 11
              }
            },
            register: 'blur', // 失去焦点后就会检测
            message: {
              required: '请输入正确的手机号',
              len: '手机号必须为11位'
            }
          },
          { // 用户名配置
            type: 'input',
            modelKey: 'phoneNum',
            label: '验证码',
            props: {
              placeholder: '请输入手机验证码',
              type: 'number' // 密码不可看
            },
            rules: { // 校验
              required: true, // 必填
              type: 'string',
              len: 4,
              custom: (val) => {
                return val.length === 4
              }
            },
            register: 'blur', // 失去焦点后就会检测
            message: {
              required: '请输入正确的手机验证码',
              len: '手机验证码必须为4位'
            }
          },
          {
            label: '注册',
            type: 'submit'
          }
        ]
      }
    }
  },
  methods: {
    clickPhone () {
      this.phone = this.model.phone // 获取当前手机号
      console.log()
      let regMoblie = /^1[345678]\d{9}$/ // 检验手机号的
      let phoneNum = document.getElementById('but')
      if (!regMoblie.test(this.phone)) {
        alert('请输入正确的手机号')
        return false
      } else {
        let that = this
        let timer = setInterval(() => {
          that.times --
          phoneNum.innerHTML = that.times + '重新获取'
          phoneNum.style.color = '#ccc'
          phoneNum.disabled = 'disabled'
          if (that.times === 0) {
            phoneNum.innerHTML = '获取验证码'
            phoneNum.style.color = '#00bcd4'
            phoneNum.disabled = ''
            clearInterval(timer)
          }
        }, 1000)
      }
    },
    submitHandler () { // 提交注册
      console.log('我是注册')
      this.axios.get('/register', { params: this.model })
        .then((res) => {
          console.log(res.success + '注册成功')
        }).catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .register
    .banner
      width 100%
      height 200px
    .from_input >>> .border-bottom-1px::after
        border-bottom: 2px solid #e8e8e8
    #but
      outline none // 取出input点击后的边框
      text-align center
      font-size 13px
      width 28%
      background transparent
      border 0
      position absolute
      right 3%
      color #00bcd4
      top 51.3%
      z-index 9999
      line-height 45px
</style>
